<!DOCTYPE html>
<html>
<head>

<!--    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">-->

    <title>文档生成</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入Bootstrap和jQuery库 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- 自定义样式表 -->
    <link rel="stylesheet" href="css/main.css">

    <!-- JavaScript代码 -->
    <script>
        $(function() {
            // 处理表单提交事件
            $('form').submit(function(event) {
                event.preventDefault();  // 阻止默认提交行为

                // 获取表单数据
                var driver = $('#driver').val();
                var ip = $('#ip').val();
                var port = $('#port').val();
                var database = $('#database').val();
                var username = $('#username').val();
                var password = $('#password').val();

                // 发送AJAX请求
                $.ajax({
                    url: 'http://localhost:9999/getDoc',
                    type: 'POST',
                    data: JSON.stringify({
                        'driver': driver,
                        'ip': ip,
                        'port': port,
                        'database': database,
                        'username': username,
                        'password': password
                    }),
                    contentType: 'application/json',
                    success: function(response) {
                        // 清空表单并提示保存文件
                        $('form')[0].reset();
                        alert('文件已保存在项目同级目录！');
                    },
                    error: function() {
                        alert('项目同级目录查看,若没有文件请稍后再试！');
                    }
                });
            });
        });
    </script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">数据库文档</div>
    <div style="padding: 10px 0 20px 10px;">
        <h3>&nbsp;&nbsp;&nbsp;生成数据库字段文档</h3>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h2>数据库连接信息</h2>
            <hr>
            <form>
                <div class="form-group">
                    <label for="driver">Driver：</label>
                    <input type="text" class="form-control" id="driver" placeholder="请输入Driver" value="com.mysql.cj.jdbc.Driver" required>
                </div>
                <div class="form-group">
                    <label for="ip">IP：</label>
                    <input type="text" class="form-control" id="ip" placeholder="请输入IP地址" value="127.0.0.1" required>
                </div>
                <div class="form-group">
                    <label for="port">Port：</label>
                    <input type="text" class="form-control" id="port" placeholder="请输入端口号" value="3306" required>
                </div>
                <div class="form-group">
                    <label for="database">Database：</label>
                    <input type="text" class="form-control" id="database" placeholder="请输入数据库名称" required>
                </div>
                <div class="form-group">
                    <label for="username">Username：</label>
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名" value="root" required>
                </div>
                <div class="form-group">
                    <label for="password">Password：</label>
                    <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
                </div>
                <button type="submit" class="btn btn-primary">提交</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>